<template>
  <el-form :model="account" label-width="60px" ref="formRef" :rules="accountRules">
    <el-form-item label="账号" prop="name">
      <el-input v-model="account.name" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="account.password" show-password />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ElForm } from "element-plus"
import { defineProps, defineEmits, computed, ref, defineExpose } from "vue"
import { ElMessage } from "element-plus"
import localCache from "@/utils/cache"
// import { useStore } from "vuex"
import { useStore } from "@/store/index"

const props = defineProps({
  modelValue: {
    type: Object as { name; password },
    default: () => ({})
  }
})
const emits = defineEmits(["update:modelValue"])
const account = computed({
  get: () => props.modelValue,
  set: newValue => emits("update:modelValue", newValue)
})
const store = useStore()

const accountRules = {
  name: [
    { required: true, message: "必须输入用户名", trigger: "blur" },
    { pattern: /^[a-z0-9]{3,20}$/, message: "必须是6~20个字母或者数字", trigger: "blur" }
  ],
  password: [
    { required: true, message: "必须输入密码", trigger: "blur" },
    { pattern: /^[a-z0-9]{3,}$/, message: "必须是3位以上数字", trigger: "blur" }
  ]
}

// 验证form的函数
const formRef = ref<InstanceType<typeof ElForm>>()
const accountLoginAction = (isKeep: boolean) => {
  // 1.验证是否成功
  formRef.value.validate(valid => {
    if (valid) {
      // 登录逻辑
      const username = account.value.name
      const password = account.value.password

      // 保存账号和密码
      if (isKeep) {
        localCache.setCache("name", name)
        localCache.setCache("password", password)
      }

      // 登录
      store.dispatch("login/userLogin", { username, password })
    } else {
      ElMessage.error("账号或者密码错误~")
    }
  })
}
// 如果父组件需要调用子组件方法   子组件必须使用definexpose导出
defineExpose({
  accountLoginAction
})
</script>

<style scoped></style>
